<template>
	<view style="display:flex;flex-flow:row;width:100%;">
		<!--左侧-->
		<scroll-view scroll-y="true" class="scroll-Y" :scroll-top="scrollTop" style="width:30%;">
			<view class="uni-flex uni-column" style="width:100%;" v-for="(item,k) in mainclass" :key="index">
				<view class="flex-item flex-item-V" style="height:80rpx;text-align:center;display:flex;align-items:center;justify-content: center;"
				 :style="mainclabk[k]" @click="showSubClass(k,$event)">
					{{item.name}}
				</view>
			</view>
		</scroll-view>

		<!--右侧-->
		<view class="uni-flex uni-column" style="width:70%;">
			<!--顶部分类-->
			<scroll-view class="scroll-view" scroll-x="true" style="white-space: nowrap;">
				<div v-for="(item,k) in subclass" :key="index" style="display:inline-block;height:80rpx;width:120rpx;
            border-radius:40rpx;border:1rpx solid #999;margin-left:20rpx;"
				 :style="subclabk[k]">
					<view @click="showGoodsList(item.goodstypeId,1,k)" style="height:80rpx;width:120rpx;
            text-align:center;display:flex;align-items:center;justify-content: center;">
						{{item.name}}
					</view>
				</div>
			</scroll-view>

			<!--底部商品-->
			<scroll-view scroll-y="true" class="scroll-Y" :scroll-top="scrollTop" style="width:100%;" @scrolltolower="getGoodsByClassType()">
				<view class="uni-flex uni-column" v-for="(item,k) in goodsinfo" :key="index" @click="toProdDetail(k)" >
					<view  style="width:100%;height:200rpx;display:flex;align-item:center;" >
						<view style="height:200rpx;display:flex;align-items:center;">
							<img :src="item.goodPhoto" style="width:180rpx;height:180rpx;">
						</view>
						<view style="width:100%;height:200rpx;margin-top:10rpx;">
							<view style="padding:10rpx;">
								{{item.goodsName}}
							</view>
							<view class="item-right flex-wrp-row">
								<img src="http://yueang2.oss-cn-qingdao.aliyuncs.com/wm-img/cert.png" class="w20 h20" style="margin-left:80%;">
							</view>
							<view>
								<span style="margin-left:10rpx;color:#ff0000;">¥{{item.price}}</span>

								<span v-if="isKill" style="margin-left:100rpx;color:#999;text-decoration: line-through;">
									¥{{item.killPrice}}
								</span>
								<span v-if="isAssemble" style="margin-left:100rpx;color:#999;text-decoration: line-through;">
									¥{{item.assemblePrice}}
								</span>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import SelfSwiper from '@/components/swiper' //
	import WXAJAX from '../../utils/request'
	import amapFile from '../../libs/amap-wx.js'
	import utils from '@/utils'
	import DialogBox from '@/components/dialogBox' // 对话框
	import RightFloat from '@/components/rightFloat' // 订单项
	import getPhoneNumberGoods from '@/components/getPhoneNumberGoods' //
	import AuthenticationTag from '@/components/AuthenticationTag' //
	import NoData from '@/components/noData'
	import {
		mapState
	} from "vuex";
	import FloatButtons from "@/components/FloatButtons.vue"
	import NavBarByUser from '@/components/NavBarByUser.vue';
	import HandleLogin from "@/utils/handleLogin";
	import LoginIntercept from "@/components/LoginIntercept";
import {
		addShareRecord
	} from '@/utils/behavior';
	var perDiv = null;
	export default {
		components: {
			RightFloat,
			NoData,
			getPhoneNumberGoods,
			AuthenticationTag,
			FloatButtons,
			NavBarByUser,
			LoginIntercept
		},
		data() {
			return {
				scrollTop: 0,
				openflag: [],
				mainclass: [],
				subclass: [],
				goodsinfo: [],
				selectSubClaId: 0,
				hasPageNum: 0,
				mainclabk: [],
				subclabk: [],
			}
		},
		methods: {
			getGoodsClass: function() {
				wx.showLoading({
					mask: true
				});
				WXAJAX.POST('', '', '/goods/getGoodsTypeInfo').then((data) => {
					if (data) {

						this.mainclass = this.resetGoodsClass(data);
						this.subclass = this.mainclass[0].child;
						for (var i = 0; i < this.subclass.length; i++) {
							if (i == 0)
								this.subclabk.push("background:#999");
							else
								this.subclabk.push("background:#fff");
						}

						this.getGoodsByClassType(this.subclass[0].goodstypeId, 1);
						console.log("cladata===" + JSON.stringify(this.mainclass));
						for (var i = 0; i < this.mainclass.length; i++) {
							if (i == 0)
								this.mainclabk.push('background:#fff');
							else
								this.mainclabk.push('background:#f3f3f4');
						}
					}
					wx.hideLoading();
				}).catch((err) => {
					console.log(err);
					wx.hideLoading();
				});
			},
			toProdDetail: utils.throttle(function(index) {
				var id=this.goodsinfo[index].goodsId;
				let prod = this.goodsinfo.filter(prod => {
					return prod.goodsId === id
				})[0];
				wx.setStorageSync('prod', prod)
				console.log(prod)
				wx.navigateTo({
					url: '../prodDetail/main?goodId=' + id
				});
			}, 1000),
			//重新组建分类数据格式
			resetGoodsClass(data) {
				var parents = [];
				data.forEach((type) => {
					if (type.parentId) return true;
					var parent = {};
					parent.goodstypeId = type.goodstypeId;
					parent.name = type.name;
					if (type.imgUrl) parent.imgUrl = type.imgUrl;
					parent.child = [];
					parents.push(parent);
				});
				data.forEach((type) => {
					if (!type.parentId) return true;
					parents.forEach((parent) => {
						if (parent.goodstypeId != type.parentId) return true;
						var child = {};
						child.goodstypeId = type.goodstypeId;
						child.name = type.name;
						parent.child.push(child);
						return false;
					});
				});
				return parents;
			},
			showSubClass: function(index, e) {
				let _this = this;
				this.goodsinfo = [];
				console.log("xxxx==" + index);
				_this.subclass = this.mainclass[index].child;
				this.subclabk = [];
				for (var i = 0; i < _this.subclass.length; i++) {
					if (i == 0)
						this.subclabk.push("background:#999");
					else
						this.subclabk.push("background:#fff");
				}
				_this.mainclabk[index] = "background:#fff";

				for (var x = 0; x < this.mainclass.length; x++) {
					if (x != index)
						_this.mainclabk[x] = "background:#f3f3f4";
				}
				console.log("after:" + JSON.stringify(_this.mainclabk));
				// this.$set(_this.mainclabk,)
			},
			showGoodsList: function(goodsTypeId, pagenum, index) {
				let _this = this;
				_this.getGoodsByClassType(_this.subclass[index].goodstypeId, pagenum);
				_this.selectSubClaId = goodsTypeId;

				_this.subclabk[index] = "background:#999";
				for (var x = 0; x < this.subclass.length; x++) {
					if (x != index)
						_this.subclabk[x] = "background:#fff";
				}
			},
			getGoodsByClassType: function(goodsTypeId, pagenum) {
				let _this = this;
				_this.goodsinfo = [];
				console.log("uuuu===" + goodsTypeId);
				WXAJAX.POST({
						pageNum: pagenum,
						pageSize: 10,
						goodstypeId: goodsTypeId
					},
					'', '/goods/selectGoodsTypeInfoByClass').then((res) => {
					_this.goodsinfo = res;
				});
			},
			deleteGoodsInfo: function(goodsid, goodsTypeid, pagenum) {
				let _this = this;
				WXAJAX.POST({
						goodsId: goodsid
					},
					'', '/goods/delGoodsInfo').then((res) => {
					console.log("yyyyyy====" + JSON.stringify(res));
					getGoodsByClassType(_this.selectSubClaId, _this.hasPageNum);
				});
			},
			toGoodsDetail: function(goodsId) {
				let _this = this;
				wx.navigateTo({
					url: "../companyPack/prodDetail/main?goodsId=" + goodsid
				})

			},
		},
		mounted: function() {
			let _this = this;
			wx.setNavigationBarTitle({
				title: "商品列表"
			});
			_this.getGoodsClass();

		}
	}
</script>

<style>
	@import '../../common/uni.css'

	.scroll-view {
		width: 100%;
		height: 80rpx;

		display: flex;
	}

	.mainstyle {}
</style>
